<template>
  <div class="bg-gradient-to-b from-white to-sky-50 text-gray-800 min-h-screen overflow-hidden">
    <!-- Header -->
    <header class="bg-white/80 backdrop-blur shadow-md py-2 px-8 flex justify-between items-center sticky top-0 z-50">
      
      <h1 class="text-2xl font-semibold text-sky-700 tracking-tight logo-lay">
        <img src="/assets/images/meteor.png" alt="" class="logo">
        Meteor 3D Editor</h1>
      <nav class="space-x-6 text-sm text-gray-600">
        <a href="#assets" class="hover:text-sky-600 transition">资产库</a>
        <a href="#doc" class="hover:text-sky-600 transition">文档</a>
        <a href="https://github.com/nikonikoCW/Meteor3DEditor" class="hover:text-sky-600 transition">GitHub</a>
        <a href="#about" class="hover:text-sky-600 transition">关于</a>
      </nav>
    </header>

    <!-- Main -->
    <main class="flex h-[calc(100vh-116px)]">
      <!-- Left Sidebar -->
      <aside class="w-72 bg-white border-r p-6 fade-in overflow-y-auto">
        <h2 class="text-lg font-semibold mb-4 text-sky-700">筛选场景</h2>

        <div class="mb-4">
          <label class="block text-sm font-medium mb-1">类型</label>
          <select class="w-full border rounded p-2" v-model="filters.type">
            <option>全部</option>
            <option>园区</option>
            <option>机场</option>
            <option>交通</option>
            <option>电力</option>
          </select>
        </div>

        <div class="mb-4">
          <label class="block text-sm font-medium mb-1">标签</label>
          <input v-model="filters.tag" type="text" placeholder="例如：高精度" class="w-full border rounded p-2" />
        </div>

        <div class="mb-4">
          <label class="block text-sm font-medium mb-1">时间</label>
          <input v-model="filters.startDate" type="date" class="w-full border rounded p-2 mb-2" />
          <input v-model="filters.endDate" type="date" class="w-full border rounded p-2" />
        </div>

        <button
          class="mt-4 bg-sky-600 text-white px-4 py-2 rounded hover:bg-sky-700 w-full transition"
          @click="search"
        >
          查询
        </button>
      </aside>

      <!-- Right Content -->
      <section class="flex-1 p-10 fade-in overflow-y-auto">
        <h2 class="text-2xl font-semibold text-gray-900 mb-6">场景列表</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="scene in scenes"
            :key="scene"
            class="bg-white shadow-lg rounded-2xl overflow-hidden hover-float"
            @click="goujian"
          >
            <!-- <img
              :src="`https://via.placeholder.com/400x200?text=${encodeURIComponent(scene)}`"
              class="w-full h-48 object-cover"
              :alt="scene"
            /> -->
            <img
              :src="`https://ai-public.mastergo.com/ai/img_res/02ac055f6e8acf696214fe1d82206eaa.jpg`"
              class="w-full h-48 object-cover"
              :alt="scene"
            />
            
            <div class="p-4">
              <h3 class="text-lg font-semibold text-gray-900">{{ scene }}</h3>
              <p class="text-sm text-gray-600 mt-1">
                描述：这是关于{{ scene }}的三维数字孪生场景。
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="bg-white/80 backdrop-blur shadow-inner py-4 px-8 text-sm text-gray-500 text-center">
      &copy; 2025 Meteor3DEditor. 保留所有权利。
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router= useRouter()

const filters = ref({
  type: '全部',
  tag: '',
  startDate: '',
  endDate: '',
})

const allScenes = [
  '智慧园区', '机场控制塔', '高速枢纽', '电网监控', '工业厂区',
  '港口码头', '地下管廊', '城市交通', '商业综合体', '风电场',
  '油气田', '数据中心', '铁路编组站', '水厂泵站', '森林防火系统'
]

const scenes = ref([...allScenes])

function search() {
  // 简化逻辑：仅根据“类型”筛选（你可以扩展为包含标签和日期）
  if (filters.value.type === '全部') {
    scenes.value = [...allScenes]
  } else {
    scenes.value = allScenes.filter(scene => scene.includes(filters.value.type))
  }
}

const goujian = () => {
  router.push({
    name: 'scene'
  })
}
</script>

<style scoped>
.fade-in {
  animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hover-float {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-float:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.logo{
        width: 48px;
        height: 48px;
    }
    .logo-lay{
      display: flex;
      align-items: center;
    }
</style>
